<template>
	<view class="preview-guide">
		<view class="title">
			<view class="name">
				{{'作业指引:' +guideData.name}}
			</view>
			  <view class="icon" @click="$emit('close')">
				  <uni-icons color="#333" size="24" type="closeempty" style="position: absolute; right: 28rpx;top: 16rpx;"/>
			  </view>
			</view>
		<view class="video" v-if="Object.keys(guideData).length">
			<video :src="guideData.guideData" controls play-btn-position="center" object-fit="fit" :show-background-playback-button="false"></video>
		</view>
		
	</view>
</template>

<script>
export default {
	props: {
		guideData: {
			type: Object
				
		},
	},
	data() {
		return {
				
		};
	},
};
</script>

<style lang="scss">
	.preview-guide{
		.title{
			color: #333;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			
			.name{
				    width: 589rpx;
				    // background: pink;
				    display: flex;
				    align-items: center;
					padding-bottom: 12rpx;
					padding-top: 24rpx;
				
			}
			.icon{
				    display: flex;
				    flex: 1;
				    // background: red;
				    display: flex;
				    align-items: center;
				    justify-content: flex-end;
					padding-bottom: 12rpx;
					padding-top: 24rpx;
			}
		}
		width: 710rpx;
		// height: 486rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 24rpx 28rpx;
		padding-top: 0;
		box-sizing: border-box;
		video{
			width: 654rpx;
			height: 382rpx;
			// margin-top: 12rpx;
		}
	}
</style>
